<template>
  <div class="app-container page-container right-side-dialog">
    <!-- 搜索条件 -->
    <div class="header-search single_line">
      <el-form ref="search_form" :model="search" :inline="true" label-width="0">
        <div class="form-area">
          <div class="search_view">
            <el-form-item>
              <el-input v-model="search.hxy_scl_name" placeholder="请选择学校" readonly @focus="schoolVisible = true" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="search.keyword" placeholder="请输入学生卡号/姓名" />
            </el-form-item>
            <div class="btn-area">
              <span class="spp-btn spp-btn-primary" @click="getStuPaginateData()">搜索</span>
              <span class="spp-btn" @click="resetData()">重置</span>
            </div>
            <div class="btn-more-area" @click="stuMoreVisible = !stuMoreVisible">
              <span>更多筛选项</span>
              <i v-if="!stuMoreVisible" class="el-icon-arrow-down" />
              <i v-else class="el-icon-arrow-up" />
            </div>
          </div>
          <div v-if="stuMoreVisible" class="more_search_view">
            <el-form-item>
              <div class="form_lable">年级</div>
              <el-select v-model="search_gra_id" clearable placeholder="请选择年级">
                <el-option v-for="(item, k) in gra_dic" :key="k" :label="item.gra_name" :value="k" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="form_lable">班级</div>
              <el-select v-model="search.hxy_cls_id" clearable placeholder="请选择班级">
                <el-option v-for="item in search_class_dic" :key="item.hxy_cls_id" :label="item.cls_name" :value="item.hxy_cls_id" />
              </el-select>
            </el-form-item>
            <el-form-item class="time_input">
              <div class="form_lable">创建时间</div>
              <el-date-picker v-model="search_create_time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item>
              <div class="form_lable">入学年份</div>
              <el-select v-model="search.insch_year" clearable placeholder="请选择">
                <el-option v-for="item in insch_year_dic" :key="item.value" :label="item.year" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="form_lable">在校状态</div>
              <el-select v-model="search.stay_flag" placeholder="请选择">
                <el-option v-for="(value, key, index) in stay_flag_dic" :key="index" :label="value" :value="key"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="form_lable">卡类型</div>
              <el-select v-model="search.card_type_flag" placeholder="请选择">
                <el-option v-for="(value, key, index) in card_type_flag_dic" :key="index" :label="value" :value="key"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="form_lable">是否制卡</div>
              <el-select v-model="search.card_mark_flag" placeholder="请选择">
                <el-option label="制卡" value="1"></el-option>
                <el-option label="未制卡" value="0"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content_view">
      <el-table ref="table" :data="stu_paginate_data" :height="height-80" size="mini" stripe>
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="年级" min-width="100" align="left">
          <template slot-scope="scope">
            <div>{{ checkShowName(scope.row.gra_name, scope.row.gra_show_name) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="班级" min-width="100" align="left">
          <template slot-scope="scope">
            <div>{{ checkShowName(scope.row.cls_name, scope.row.cls_show_name) }}</div>
          </template>
        </el-table-column>
         <el-table-column label="姓名" prop="stu_name" min-width="100" align="left" />
        <el-table-column label="入学年份" prop="insch_year" min-width="100" align="left" />
        <el-table-column label="学生卡号" prop="stu_no" min-width="150" align="left" />
        <el-table-column label="学生编号" prop="sequence" min-width="150" align="left" />
        <el-table-column label="卡类型" prop="card_type_name" min-width="120" align="left" />
        <el-table-column label="创建时间" width="200" align="left">
          <template slot-scope="scope">
            <div>{{ scope.row.create_time ? formatDateTime(scope.row.create_time) : '--' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right" align="left">
          <template slot-scope="scope">
            <el-button type="text" @click="getStuDetail(scope.row.hxy_stu_id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="page_size" @pagination="getStuPaginateData" />
    </div>
    <!-- 选择学校 -->
    <el-dialog title="选择学校" :visible.sync="schoolVisible" :close-on-click-modal="false" width="720px" class="school_view">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <SelectSchool @selectSchool="selectSchool" />
      </el-scrollbar>
    </el-dialog>
    <!-- 学生详情 -->
    <el-dialog title="学生详情" :visible.sync="stuDetailVisible" :close-on-click-modal="false" width="720px">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <div class="stu_detail_content">
          <el-form v-if="stu_detail_data.stu" label-width="120px">
            <div style="text-align: center;">
              <img :src="stu_detail_data.stu.stu_avatar?stu_detail_data.stu.stu_avatar:'/static/img/avatardefault.a2ec23a0.png'" alt="" onerror="this.src='/static/img/avatardefault.a2ec23a0.png'" style="height:80px;">
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item class="detail-el-form-item" label="姓名：">{{ stu_detail_data.stu.stu_name }}</el-form-item>
                <el-form-item class="detail-el-form-item" label="年级：">{{ checkShowName(stu_detail_data.stu.gra_name, stu_detail_data.stu.gra_show_name) }}</el-form-item>
                <el-form-item class="detail-el-form-item" label="出生日期：">{{ stu_detail_data.stu.stu_birth }}</el-form-item>
                <el-form-item class="detail-el-form-item" label="学生编号：">{{ stu_detail_data.stu.stu_no }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="detail-el-form-item" label="性别：">{{ stu_detail_data.stu.stu_sex_name }}</el-form-item>
                <el-form-item class="detail-el-form-item" label="班级：">{{ checkShowName(stu_detail_data.stu.cls_name, stu_detail_data.stu.cls_show_name) }}</el-form-item>
                <el-form-item class="detail-el-form-item" label="学籍号：">{{ stu_detail_data.stu.insch_no }}</el-form-item>
                <el-form-item class="detail-el-form-item" label="入校年份：">{{ stu_detail_data.stu.insch_year }}</el-form-item>
              </el-col>
            </el-row>
            <el-form-item class="detail-el-form-item" label="家庭地址：">{{ stu_detail_data.stu.stu_addr }}</el-form-item>
          </el-form>
          <div class="el-dialog__title title">学生卡信息</div>
          <div v-if="stu_detail_data.card">
            <el-table border :data="stu_detail_data.card">
              <el-table-column label="卡内码" prop="card_sn" />
              <el-table-column label="卡号">
                <template slot-scope="scope">
                  <div>{{ scope.row.stu_no?scope.row.stu_no:'--' }}</div>
                </template>
              </el-table-column>
              <el-table-column label="卡类型" prop="card_type_name" />
              <el-table-column label="卡序">
                <template slot-scope="scope">
                  <div>{{ scope.row.card_order==='0'?'主卡':'副卡' }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="el-dialog__title title">联系人信息</div>
          <div v-if="stu_detail_data.fam">
            <el-table border :data="stu_detail_data.fam">
              <el-table-column label="联系人">
                <template slot-scope="scope">
                  <div>{{ scope.row.fam_name }}({{ scope.row.fam_relation == '0' ? '母亲' : scope.row.fam_relation == '1' ? '父亲' : scope.row.fam_relation == '2' ? '祖父母' : scope.row.fam_relation == '3' ? '其他' : scope.row.fam_relation }})</div>
                </template>
              </el-table-column>
              <el-table-column label="手机号" prop="fam_phone" />
              <el-table-column label="顺序" prop="fam_order" width="70" />
              <el-table-column label="业务状态">
                <template slot-scope="scope">
                  <div v-if="scope.row.biz_status_flag == 0" class="font_green">已开通</div>
                  <div v-else class="font_red">未开通</div>
                </template>
              </el-table-column>
              <el-table-column label="app激活状态">
                <template slot-scope="scope">
                  <div v-if="scope.row.app_reg_flag == 1" class="font_green">app激活状态：已激活</div>
                  <div v-else class="font_red">未激活</div>
                  <div>{{ scope.row.app_reg_time ? formatDateTime(scope.row.app_reg_time) : '--' }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script>
import { paginate, detail } from '@/api/pajx/pajx/student'
import { gra, stay_flag, card_type } from '@/api/public'
import { formatClass, parseTime, formatDateTime, checkShowName } from '@/utils/index'
import { mapState } from 'vuex'
import SelectSchool from '@/components/SelectSchool'
import Pagination from '@/components/Pagination'
export default {
  name: 'PajxStudent',
  components: { SelectSchool, Pagination },
  data() {
    return {
      height: window.innerHeight - 135,
      auth: {},
      gra_dic: [],
      search_class_dic: [],
      insch_year_dic:[],
      stay_flag_dic: [],
      card_type_flag_dic: [],
      search: {
        hxy_scl_id: '',
        hxy_scl_name: '',
        hxy_gra_id: '',
        hxy_cls_id: '',
        create_time_start: '',
        create_time_end: '',
        stay_flag: '',
        card_type_flag: '',
        card_mark_flag: '',
        keyword: ''
      },
      search_create_time: '',
      schoolVisible: false,
      search_gra_id: '',
      stuMoreVisible: false,
      page: 1,
      page_size: 20,
      total: 0,
      stu_paginate_data: [],
      stu_detail_data: {},
      stuDetailVisible: false
    }
  },
  computed: {
    ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: {
    search_gra_id(val) {
      if (val) {
        this.search_class_dic = this.gra_dic[val].classes
        this.search.hxy_gra_id = val
        this.search.hxy_cls_id = ''
      }
    }
  },
  methods: {
    formatDateTime: formatDateTime,
    checkShowName: checkShowName,
    // 获取按钮权限
    permissionAuth() {},
    // 重置搜索选项
    resetData() {
      Object.assign(this.$data.search, this.$options.data().search)
      this.search.hxy_scl_id = ''
      this.search.hxy_scl_name = ''
      this.search_gra_id = ''
      this.search_create_time = ''
    },
    // 选择学校
    selectSchool(data) {
      this.schoolVisible = false
      this.search.hxy_scl_id = data.hxy_scl_id
      this.search.hxy_scl_name = data.scl_name
      gra(data.hxy_scl_id).then(response => {
        this.gra_dic = formatClass(response.data)
      })
      this.getStuPaginateData()
    },
    // 获取字典列表
    getDicData() {
      stay_flag().then(response => {
        this.stay_flag_dic = response.data
      })
      card_type().then(response => {
        this.card_type_flag_dic = response.data
      })
    },
    // 构建入学年份
    getStuInschYear() {
      var my_date = new Date();
      var year = parseInt(my_date.getFullYear());
      for (var i = 0; i <= 10; i++) {
        var obj = {
          value: year - i,
          year:  year - i
        }
        this.insch_year_dic.push(obj)
      }
    },
    // 获取学生列表数据
    getStuPaginateData() {
      if(!this.search.hxy_scl_id){
        this.$message({
          message: '请选选择学校',
          type: 'warning'
        })
        return
      }
      this.search.create_time_start = this.search_create_time ? parseTime(this.search_create_time[0], '{y}{m}{d}{h}{i}{s}') : ''
      this.search.create_time_end = this.search_create_time ? parseTime(this.search_create_time[1], '{y}{m}{d}{h}{i}{s}') : ''
      paginate(this.search, this.page, this.page_size).then(response => {
        this.stu_paginate_data = response.data.list
        this.total = response.data.totalRow
      })
    },
    // 获取学生详情
    getStuDetail(hxy_stu_id) {
      detail(hxy_stu_id).then(response => {
        response.data.stu.stu_sex_name = response.data.stu_sex === '1' ? '男' : response.data.stu_sex === '2' ? '女' : '未知'
        if (response.data.stu.stu_birth) {
          response.data.stu.stu_birth = response.data.stu.stu_birth.slice(0, 4) + '-' + response.data.stu.stu_birth.slice(4, 6) + '-' + response.data.stu.stu_birth.slice(6, 8)
        }
        this.stu_detail_data = response.data
        this.stuDetailVisible = true
      })
    }
  },
  created() {
    this.permissionAuth()
    this.getDicData()
    this.getStuInschYear()
  }
}
</script>
<style lang="scss">
.stu_detail_content{
  .title{
    margin: 20px 0;
  }
}
</style>
